<!--
 * @Description: dataV轮播表
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 20:55:50
 * @LastEditors: gaoyunpeng
-->
<template>
  <dv-scroll-board
    :config="configdisplacementofDam"
    :style="{ height: height }"
  />
</template>

<script>
export default {
  props: {
    // 高度默认100%
    height: {
      type: String,
      default: '100%'
    },
    // 表头
    headerList: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 传递的数据,必传
    data: {
      type: Array,
      require: true
    },
    // 表行数，默认15行
    rowNum: {
      type: Number,
      default: 15
    },
    // 表头颜色，有默认值
    headerBGC: {
      type: String,
      default: 'rgba(18, 63, 104, 0.4)'
    },
    // 奇数行背景色
    oddRowBGC: {
      type: String,
      default: '#07395f'
    },
    // 偶数行背景色
    evenRowBGC: {
      type: String,
      default: '#052b4c'
    }
  },
  data() {
    return {
      configdisplacementofDam: {}
    }
  },
  methods: {},

  created() {
    this.configdisplacementofDam = {
      data: this.data, // 表数据
      header: this.headerList, // 表头数据
      rowNum: this.rowNum, // 表行数
      headerBGC: this.headerBGC, // 表头背景色
      oddRowBGC: this.oddRowBGC, // 奇数行背景色
      evenRowBGC: this.evenRowBGC, // 偶数行背景色
      waitTime: 2000 // 轮播时间间隔(ms)
    }
  }
}
</script>

<style lang="scss" scoped>
.dv-scroll-board {
  color: #3395e7;
  ::v-deep .header {
    font-size: 1em;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    .header-item {
      width: 120px !important;
      &:nth-child(3) {
        text-align: center;
      }
    }
  }

  ::v-deep .rows {
    .row-item {
      text-align: center;
      .ceil {
        color: #3395e7;
        font-size: 1em;
      }
      .ceil:nth-child(1) {
        color: #efb5ac;
        font-size: 1.2em;
        width: 15% !important;
        padding-left: 30px;
      }
      .ceil:nth-child(2) {
        font-size: 0.8rem;
        width: 65% !important;
        text-align: center;
        font-weight: 700;
      }
      .ceil:nth-child(3) {
        color: #efb5ac;
        width: 20% !important;
        font-size: 14px;
        // padding-left: 20px;
      }
    }
  }
}
</style>
